<template>
  <div class="mobile-preview-wrapper">
    <div class="mobile-header">商城首页</div>
    <div class="mobile-body">
      <draggable v-model="localConfig" handle=".preview-drag-handle" animation="150">
        <div v-for="(component, index) in localConfig" :key="index" class="preview-component-wrapper">
          <component :is="component.name + 'Preview'" :config="component.content" />
          <div class="preview-overlay">
            <div class="preview-drag-handle">{{ component.title }} <i class="el-icon-rank"></i></div>
          </div>
        </div>
      </draggable>
    </div>
  </div>
</template>
<script>
// 首页只使用 Search 和 Banner 预览
import SearchPreview from './SearchPreview.vue';
import BannerPreview from './BannerPreview.vue';
// NavPreview, NewsPreview ...
import draggable from 'vuedraggable';

export default {
  name: "HomePreview",
  components: { SearchPreview, BannerPreview, draggable },
  props: ['config'],
  computed: {
      localConfig: { // v-model for draggable
          get() { return this.config },
          set(val) { /* draggable will update parent */ }
      }
  }
}
</script>
